<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Query</title>
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"> -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/unicons.css">
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    
    <div class="hero-center-section">
		<div class="left-text">Love</div>
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-md-8">
					<div class="img-wrap">
						<img src="https://images.unsplash.com/photo-1530789253388-582c481c54b0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
					</div>
				</div>
			</div>
		</div>
	</div>
    <!-- Keep add div and img -->


	<div class="hero-center-section">
		<div class="left-text">travel</div>
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-md-8">
					<div class="img-wrap">
						<img src="https://images.unsplash.com/photo-1572099606223-6e29045d7de3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" alt="">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="hero-center-section">
		<div class="left-text">fashion</div>
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-md-8">
					<div class="img-wrap">
						<img src="https://images.unsplash.com/photo-1530789253388-582c481c54b0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="hero-center-section">
		<div class="left-text">animals</div>
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-md-8">
					<div class="img-wrap">
						<img src="https://images.unsplash.com/photo-1550026593-f369f98df0af?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="hero-center-section">
		<div class="left-text">business</div>
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-md-8">
					<div class="img-wrap">
						<img src="https://images.unsplash.com/photo-1459749411175-04bf5292ceea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
					</div>
				</div>
			</div>
		</div>
	</div>
		
		
	<div class="section padding-top-bottom over-hide z-bigger">
		<ul class="slide-buttons">
			<li class="">
				<a href="#0" class="hover-target" data-hover="Love">love</a>
			</li>
			<li class="">
				<a href="#0" class="hover-target" class="hover-target" data-hover="nature">nature</a>
			</li>
			<li class="">
				<a href="#0" class="hover-target" data-hover="travel">travel</a>
			</li>
			<li class="">
				<a href="#0" class="hover-target" data-hover="dance">dance</a>
			</li>
			<li class="">
				<a href="#0" class="hover-target" data-hover="Music">Music</a>
			</li>
		</ul>
	</div>
		
	<!-- Page cursor
	================================================== -->
	
	<div class='cursor' id="cursor"></div>
	<div class='cursor2' id="cursor2"></div>
	<div class='cursor3' id="cursor3"></div> 
		
	<!-- Dark/light switch
	================================================== -->
	
	<div class="bottom-right">								
		<div class="switch">
			<div class="circle hover-target"></div>
		</div>									
	</div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="./app.js"></script>
</body>
</html>